<template>
  <div class="join-addEdit-detail">
    <!-- 添加编辑左边数据 -->
    <el-dialog :append-to-body="true" :title="title" v-model="show" @close="cancelFun" destroy-on-close>
      <el-form :model="form" ref="formRef" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="职位名称:" prop="name">
          <el-input type="text" placeholder="请输入内容" size="large" v-model="form.name" :disabled="disabled" maxlength="50" show-word-limit> </el-input>
        </el-form-item>
        <!-- <el-form-item label="是否热门:" prop="hot">
          <el-switch v-model="form.hot" />
        </el-form-item> -->
        <el-form-item label="职位描述:" prop="zhiweiHtml" v-if="!disabled">
          <CustomEditor
            :default-content="form.zhiweiContent"
            keyId="zhiweiHtml"
            excludeKeys="group-image,group-video,insertLink,emotion,todo"
            height="300px"
            type="zhiwei"
            @content-change="contentChange"
          ></CustomEditor>
        </el-form-item>
        <el-form-item label="岗位要求:" prop="gangweiHtml" v-if="!disabled">
          <CustomEditor
            :default-content="form.gangweiContent"
            keyId="gangweiHtml"
            excludeKeys="group-image,group-video,insertLink,emotion,todo"
            height="300px"
            type="gangwei"
            @content-change="contentChange"
          ></CustomEditor>
        </el-form-item>
        <el-form-item label="职位描述:" v-if="disabled">
          <div v-html="form.zhiweiHtml"></div>
        </el-form-item>
        <el-form-item label="岗位描述:" v-if="disabled">
          <div v-html="form.gangweiHtml"></div>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelFun" size="large">取消</el-button>
          <el-button type="primary" @click="confirmFun" size="large" v-if="!disabled">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import CustomEditor from '@components/common/CustomEditor/main.vue'
import { computed, onMounted, onUnmounted, ref, watch, defineEmits, reactive } from 'vue'
import { formatHtml } from '@utils/formatHtml'
import { ElMessage } from 'element-plus'
import Join from '@api/join/index'

const props = defineProps({
  typeId: {
    type: String,
    default: null
  },
  status: {
    type: String,
    default: null
  },
  show: {
    type: Boolean,
    default: null
  },
  addEditData: {
    type: Object,
    default: {
      id: '',
      name: '',
      hot: true,
      zhiweiContent: '[]',
      zhiweiHtml: '',
      gangweiContent: '[]',
      gangweiHtml: ''
    }
  }
})

const formRef = ref()

const form = reactive({
  id: '',
  name: '',
  hot: true,
  zhiweiContent: '[]',
  zhiweiHtml: '',
  gangweiContent: '[]',
  gangweiHtml: ''
})

const rules = reactive({
  name: [{ required: true, message: '文章标题不能为空!', trigger: 'blur' }],
  zhiweiHtml: [
    {
      required: true,
      validator: (rule, value, callback) => {
        value = form.zhiweiHtml
        if (!value || value === '<p><br></p>' || value === '<p></p>') {
          callback(new Error('职位描述不能为空!'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  gangweiHtml: [
    {
      required: true,
      validator: (rule, value, callback) => {
        value = form.gangweiHtml
        if (!value || value === '<p><br></p>' || value === '<p></p>') {
          callback(new Error('岗位要求不能为空!'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
})

const emit = defineEmits(['change-addEdit-detail'])

const defaultContent = ref()

const contentChange = (content, html, text, type) => {
  if (type == 'zhiwei') {
    form.zhiweiContent = content
    form.zhiweiHtml = html
    formRef.value.validateField(['zhiweiHtml'], async (valid) => {})
  } else if (type == 'gangwei') {
    form.gangweiContent = content
    form.gangweiHtml = html
    formRef.value.validateField(['gangweiHtml'], async (valid) => {})
  }
}

let statusMap = { add: '添加职位', edit: '编辑职位', read: '查看职位' }
const title = computed(() => {
  return statusMap[props.status]
})

const disabled = computed(() => {
  return props.status == 'read' ? true : false
})

function confirmFun() {
  formRef.value.validate(async (valid) => {
    if (valid) {
      form.zhiweiHtml = formatHtml(form.zhiweiHtml)
      form.gangweiHtml = formatHtml(form.gangweiHtml)

      let { id, name, hot, gangweiContent, gangweiHtml, zhiweiContent, zhiweiHtml } = form

      let data = {
        jobsName: name,
        positionDescribe: zhiweiHtml,
        positionDescribeContent: zhiweiContent,
        jobsRequirements: gangweiHtml,
        jobsRequirementsContent: gangweiContent,
        positionType: props.typeId,
        isHot: hot ? 1 : 0
      }
      let res = ''

      if (props.status == 'add') {
        res = await new Join().add(data)
      } else {
        data.id = id
        res = await new Join().edit(data)
      }

      if (res.code == 200) {
        ElMessage({
          message: `${props.status == 'add' ? '新增成功!' : '更新成功!'}`,
          type: 'success'
        })
        emit('change-addEdit-detail', form, props.status)
      }

      console.log(form)
    }
  })
}

function cancelFun() {
  emit('change-addEdit-detail', form, 'cancel')
}

watch(
  () => props.addEditData,
  (newValue, oldValue) => {
    form.id = newValue.id
    form.name = newValue.name
    form.hot = newValue.hot
    form.zhiweiContent = newValue.zhiweiContent
    form.zhiweiHtml = newValue.zhiweiHtml
    form.gangweiContent = newValue.gangweiContent
    form.gangweiHtml = newValue.gangweiHtml
    console.log(form)
  },
  { deep: true }
)
</script>
